<template>
  <el-dialog v-model="dialogVisible" @close="handleDialogClose()" title="预览表单" width="600">
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <template #footer>
      <el-button type="primary" @click="submitForm()"> 提交 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { fetchTemplateData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

let dialogVisible = ref(false);

const vFormRef = ref(null)
const json = { "widgetList": [{ "key": 79888, "type": "input", "icon": "text-field", "formItemFlag": true, "options": { "name": "input25936", "label": "用户名", "labelAlign": "", "type": "text", "defaultValue": "", "placeholder": "", "columnWidth": "200px", "size": "", "labelWidth": null, "labelHidden": false, "readonly": false, "disabled": false, "hidden": false, "clearable": true, "showPassword": false, "required": false, "requiredHint": "", "validation": "", "validationHint": "", "customClass": "", "labelIconClass": null, "labelIconPosition": "rear", "labelTooltip": null, "minLength": null, "maxLength": null, "showWordLimit": false, "prefixIcon": "", "suffixIcon": "", "appendButton": false, "appendButtonDisabled": false, "buttonIcon": "custom-search", "onCreated": "", "onMounted": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "", "onAppendButtonClick": "" }, "id": "input25936" }], "formConfig": { "modelName": "formData", "refName": "vForm", "rulesName": "rules", "labelWidth": 80, "labelPosition": "left", "size": "", "labelAlign": "label-left-align", "cssCode": "", "customClass": [], "functions": "", "layoutType": "PC", "jsonVersion": 3, "onFormCreated": "", "onFormMounted": "", "onFormDataChange": "", "customFormName": "自定义表单名" } };
const formJson = reactive(json)
const formData = reactive({})
let optionData = reactive({})

const handleDialogClose = () => {
  dialogVisible.value = false;
};

const submitForm = () => {
  dialogVisible.value = false;
  fetchTemplateData(
    mapStore.templateTableCurrentPage,
    mapStore.templateTablePageSize
  );
};

defineExpose({
  dialogVisible
});
</script>
<style scoped>
.dialog-wrapper {
  display: flex;
  height: auto;
  padding-bottom: 20px;
  width: 100%;
}

.file-upload__wrapper {
  flex: 1;
  border: 1px solid #dcdfe6;
  height: 31px;
  display: flex;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.file-upload__input {
  display: none;
}

.file-upload__label {
  display: block;
  padding: 5px 10px;
  height: 31px;
  line-height: 20px;
  background-color: #339933;
  color: white;
  cursor: pointer;
}

.file-upload__label:hover {
  background-color: #33cc00;
}

.file-upload__name {
  flex: 1;
  line-height: 30px;
  font-size: 14px;
}

.file-upload-tips {
  color: #f56c6c;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
}
</style>
